<template>
  <view class="">
    <diaBox ref="diaBoxRef" title="绑定手机号" @comfireFunc="handleBindPhone" :show-btns="false" :is-close="isClose"
            :show-cancel="showCancel">
      <template v-slot:dia-cont>
        <view class="phoneBox">
          <view class="inputBox">
            <view class="input">
              <u--input placeholder="请输入手机号" border="surround" color="#fff" v-model="phone"></u--input>
            </view>
          </view>
          <view class="inputBox">
            <view class="input">
              <u--input placeholder="请输入验证码" border="surround" color="#fff" v-model="inputCode"></u--input>
            </view>
            <view class="btn">
              <text @tap="getCode">{{ tips }}</text>
            </view>
          </view>
<!--          <view class="btns">-->
<!--            <view class="btnOut btnOut2" v-if="showDefalut">-->
<!--              <view class="btn">-->
<!--                <text>获取默认手机号</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
          <view class="btns">
            <view class="btnOut" v-if="showDefalut">
              <view class="btn">
                <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">默认手机号</button>
              </view>
            </view>
            <view class="btnOut btnOut2" >
              <view class="btn"  @click="handleBindPhone">
                <text>确定</text>
              </view>
            </view>
          </view>
        </view>
      </template>

    </diaBox>

    <u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
  </view>
</template>

<script>
import diaBox from "@/components/diaBox/index.vue"
import {
  bindPhoneApi,
  getCodeApi, getPhoneApi
} from '../../api/api';

export default {
  name: 'bindPhone',
  components: {
    diaBox
  },
  props: {
    mobile: {
      type: String,
      default: ""
    },
    isClose: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showDefalut: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tips: '获取验证码',
      phone: '',
      inputCode: '',
      seconds: 90,
      showCode: false,
    }
  },
  onShow() {
    if (this.mobile != '') this.phone = this.mobile
  },
  methods: {
    async getPhoneNumber (e) {
      console.log(e.detail.code)  // 动态令牌
      console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
      console.log(e.detail.errno)  // 错误码（失败时返回）
      const res = await getPhoneApi({code:e.detail.code})
      if (res.code == 200) {
        this.phone = res.data.phoneNumber
      }
    },
    close() {
      this.$refs.diaBoxRef.show = false
    },
    show() {
      this.$refs.diaBoxRef.show = true
    },
    // code改变
    codeChange(text) {
      this.tips = text;
    },
    // 获取验证码
    async getCode() {
      if (this.phone == '') return uni.$u.toast('请输入手机号');
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        const res = await getCodeApi(this.phone)
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    // 绑定手机号
    async handleBindPhone() {
      if (this.phone == "") return this.$toast("请输入手机号")
      if (this.inputCode == "") return this.$toast("请输入验证码")

      const data = {
        "mobile": this.phone,
        "verifyCode": this.inputCode
      }

      const res = await bindPhoneApi(data)
      if (res.code == 200) {
        this.close()
        uni.$u.toast("绑定成功")
        this.$emit("handleSuc")
        this.$refs.diaBoxRef.close()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
button{
  background: transparent;
  color: #fff;
}
.btns{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
  .btnOut{
    flex: 1;
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
    margin-right: 50rpx;
    height: 85rpx;
    &:last-child{
      margin-right: 0;
    }
  }
  .btnOut2{
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
    .btn{
      background: #2cb3af;
    }
  }
  .btn{
    width: 100%;
    font-weight: 600;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 85rpx;
    text-align: center;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;

  }
}
.phoneBox {

  margin-top: 20rpx;

  .inputBox {
    display: flex;
    align-items: center;
    border: 2rpx solid #343539;
    background: rgba(15, 15, 15, 0.41);
    border-radius: 40rpx;
    margin-bottom: 20rpx;
    height: 112rpx;
    padding: 0 32rpx;

    .btn {
      font-weight: 400;
      font-size: 32rpx;
      color: #0FC6C2;
      line-height: 32rpx;
      text-align: right;
      font-style: normal;
    }

    .input {
      flex: 1;
      color: #fff;
    }
  }
}

.getAvatarBox {
  padding: 30rpx;
  width: 80vw;
  box-sizing: border-box;

  .title2 {
    color: #000;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    text-align: center;
    font-size: 32rpx;
  }
}

.btns2 {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 60rpx;
    margin-top: 20rpx;
    color: #fff;
    border-radius: 10rpx;
    font-size: 26rpx;
    padding: 0 !important;
    background-color: #5aa10c;
    margin-right: 40rpx;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
